<template>
	<view>
			<my-search @myClick="gotoSearch"></my-search>
		<swiper class="dq_swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true"
		>
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator class="dq_swiper_item" :url="`/subpkg/goods_detail/goods_detail?goods_id=''${item.goods_id}`">
						<image :src="item.image_src" mode="widthFix"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="dq_nav">
			<view class="dq_nav_item" v-for="item in navList" :key="item.name" @click="navClickHandler(item.name)">
				<image :src="item.image_src" ></image>
			</view>
		</view>
		<view class="dq_image_box" v-for="(item,index) in imageBox" :key="index">
			<view class="dq_title">
				<image :src="item.floor_title.image_src" mode=""></image>
			</view>
			<view class="dq_box">
				<navigator class="dq_box_left" :style="{width:item.product_list[0].image_width+'rpx'}" :url="item.product_list[0].url">
					<image :src="item.product_list[0].image_src" mode="widthFix"></image>
				</navigator>
				<view class="dq_box_right">
					<template v-for="(item2,index2) in item.product_list" :key="index2">
						<navigator v-if="index2!==0" :style="{width:item2.image_width+'rpx'}" :url="item2.url">
							<image :src="item2.image_src" mode="widthFix"></image>
						</navigator>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
import {onLoad } from "@dcloudio/uni-app"
import mySearch from "../../components/mySearch/mySearch.vue"
// 轮播图
const swiperList=ref([])
//导航栏
const navList=ref([])
// 图片盒子
const imageBox=ref([])
// 获取轮播图数据
const getSwiperList=async()=>{
	const res=await uni.$http.get('/api/public/v1/home/swiperdata');
	if(res.data.meta.status!==200){
		return uni.$showMsg()
	}
	swiperList.value=res.data.message
}
// 获取导航栏数据
const getNavList=async()=>{
	const res=await uni.$http.get('/api/public/v1/home/catitems');
	if(res.data.meta.status!==200){
		return uni.$showMsg()
	}
	navList.value=res.data.message
}
// 获取图片盒子数据
const getImageBox=async()=>{
	const res=await uni.$http.get('/api/public/v1/home/floordata');
	if(res.data.meta.status!==200){
		return uni.$showMsg()
	}
	imageBox.value=res.data.message
	imageBox.value.forEach(item=>{
		item.product_list.forEach(item1=>{
			item1.url="/subpkg/goods_list/goods_list?"+item1.navigator_url.split("?")[1]
		})
	})
}
// 导航跳转
const navClickHandler=(e)=>{
	// console.log(e);
	if(e=="分类"){
		uni.switchTab({
			url:"/pages/cate/cate"
		})
	}
}
// 跳转搜索界面
	const gotoSearch=()=>{
		uni.navigateTo({
			url:"/subpkg/search/search"
		})
	}
// 小程序刷新时
onLoad(()=>{
	getSwiperList()
	getNavList()
	getImageBox()
})
</script>

<style lang="scss" scoped>
.dq_swiper{
	width: 100%;
	.dq_swiper_item{
		width: 100%;
		image{
			width: 100%;
		}
	}
}
.dq_nav{
	width: 100%;
	height: 160rpx;
	display: flex;
	align-items: center;
	margin: 10rpx 0;
	.dq_nav_item{
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 148rpx;
			height: 148rpx;
		}
	}
}
.dq_image_box{
	display: flex;
	flex-direction: column;
	.dq_title{
		height: 60rpx;
		image{
			height: 100%;
		}
	}
	.dq_box{
		flex: 1;
		display: flex;
		.dq_box_left{
			image{
				width: 100%;
			}
		}
		.dq_box_right{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			image{
				width: 100%;
			}
		}
	}
}
</style>
